<template>
    <div class="pop-confirm">
        <mrc_ess_Popover :scrim="props.scrim" ref="mrcEssPopover" :disabled="props.disabled" :location="props.location"
            :origin="props.origin" :openOnHover="props.openOnHover" @open="handleOpen" @close="handleClose">
            <template v-slot:btn>
                <slot name="btn">
                    <!-- 触发按钮 -->
                    Popover
                </slot>
            </template>
            <template v-slot:default>
                <v-card class="my-dialog-card max-w-[100%]" :width="props.width">
                    <v-toolbar class="!h-[56px] bg-grey-lighten-4">
                        <!-- 標題 -->
                        <v-toolbar-title class="!text-[16px] !font-[700]">{{ $t(props.title) }}</v-toolbar-title>
                        <v-spacer></v-spacer>
                        <!-- 關閉按鈕 -->
                        <v-btn class="!w-[32px] !h-[32px] !min-h-[auto] !min-w-[auto] mr-3" @click="handleCloseClick">
                            <svg-icon iconClass="close" size="20"></svg-icon>
                        </v-btn>
                    </v-toolbar>
                    <v-card-text class="!pt-6 !pb-6 !pl-6 !pr-6" :style="{ maxHeight: props.maxHeight + 'px' }" :class="{
                        'pointer-events-none': btnLoading
                    }">
                        <slot name="default">
                            <!-- 内容 -->
                        </slot>
                    </v-card-text>
                    <div class="flex align-center justify-center bg-surface pt-6 pb-6">
                        <!-- 取消按鈕 -->
                        <v-btn :disabled="btnLoading" color="secondary" variant="text"
                            class="ml-3 mr-3 !normal-case !shadow-none !pl-3 !pr-3 !min-w-[auto] !h-[40px] rounded-[6px]"
                            @click="handleCancel">
                            <span class="text-[15px] leading-[15px] font-[700]">{{ $t(props.cancelText)
                                }}</span></v-btn>
                        <!-- 確定按鈕 -->
                        <v-btn color="secondary"
                            class="ml-3 mr-3 !normal-case !shadow-none !pl-3 !pr-3 !min-w-[auto] !h-[40px] rounded-[6px]"
                            @click="handleConfirm" :loading="btnLoading">
                            <span class="text-[15px] leading-[15px] font-[700]">{{ $t(props.confirmText)
                                }}</span></v-btn>
                    </div>
                </v-card>
            </template>
        </mrc_ess_Popover>
    </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
const props = defineProps({
    disabled: {
        type: Boolean,
        default: false
    },
    autoClose: {
        type: Boolean,
        default: true
    },
    cancelText: {
        type: String,
        default: "btn_cancel"
    },
    confirmText: {
        type: String,
        default: "btn_submit"
    },
    openOnHover: {
        type: Boolean,
        default: false
    },
    location: {
        default: "bottom right"
    },
    origin: {
        default: undefined
    },
    title: {
        type: String,
        default: "label_title"
    },
    maxHeight: {
        type: String,
        default: "300"
    },
    width: {
        type: [String, Number],
        default: "600"
    },
    scrim: {
        type: [Boolean, String],
        default: false
    }
})
const emit = defineEmits(['open', 'close', 'cancel', 'confirm']);
const btnLoading = ref(false);
const mrcEssPopover = ref();
/**
 * 打开事件
 */
function handleOpen(event: PointerEvent) {
    emit('open');
}
/**
 * 关闭事件
 */
function handleClose(event: PointerEvent) {
    btnLoading.value = false;
    emit('close');
}
/**
 * 点击取消
 */
function handleCancel(event: PointerEvent) {
    mrcEssPopover.value.close();
    emit('cancel', {
        showBtnLoading,
        hideBtnLoading,
        close,
        event: event
    });
}
/**
 * 点击关闭
 */
function handleCloseClick(event: PointerEvent) {
    mrcEssPopover.value.close();
}
/**
 * 点击确认
 */
function handleConfirm(event: PointerEvent) {
    if (props.autoClose) {
        mrcEssPopover.value.close();
    }
    emit('confirm', {
        showBtnLoading,
        hideBtnLoading,
        close,
        event: event
    });
}
/**
 * 确认按钮展示loading
 */
function showBtnLoading() {
    btnLoading.value = true;
}
/**
 * 确认按钮取消loading
 */
function hideBtnLoading() {
    btnLoading.value = false;
}
/**
 * 关闭对话框
 */
function close() {
    mrcEssPopover.value.close();
}
/**
 * 显示对话框
 */
function open() {
    mrcEssPopover.value.close();
}

defineExpose({
    showBtnLoading,
    hideBtnLoading,
    open,
    close
})
</script>

<style scoped>
.my-dialog-card :deep(.v-toolbar__content) {
    height: 56px !important;
}
</style>